<template>
    <div>
        <h1>表单控件</h1>
        <p>v-model三个修饰符：
            .lazy:转变为使用 change 事件进行同步
            .number:转为数值类型,这个值无法被 parseFloat() 解析，则会返回原始的值
            .trim:去首尾空白字符
        </p>
        <div>
            <h2>v-model="inputValue"的值随着输入值的变化而变化</h2>
            <div>
                <input v-model="inputValue" placeholder="edit me">
                <p>Message is: {{ inputValue }}</p>
            </div>
            <div>
                <span>Multiline message is:</span>
                <p style="white-space: pre-line;">{{ textareaInputValue }}</p>
                <br>
                <textarea v-model="textareaInputValue" placeholder="add multiple lines"></textarea>
            </div>
        </div>

        <div>
            <h2>单复选框：v-model="checked"时，选中为true,没有选中为false</h2>
            <div>
                <input type="checkbox" v-model="checked" id="checkbox">
                <label for="checkbox">{{ checked }}</label>
            </div>
        </div>

        <div>
            <h2>单选框：v-model="valueChecked"时，选中为value的值</h2>
            <div>
                <input type="radio" v-model="valueChecked" value="one">one
                <input type="radio" value="two" v-model="valueChecked">two
                <p>{{valueChecked}}</p>
            </div>
            <div>
                <!--复选框的情形：checkedNames注意这里是数组的话，那值为value的值所组成的数组，如果为字符串/false/true，那值就是true和false-->
                <h2>复选框：v-model="valueChecked"时，选中为value的值组成的数组</h2>
                <input type="checkbox" value="Jack" v-model="checkedNames">Jack
                <input type="checkbox" value="John" v-model="checkedNames">John
                <input type="checkbox" value="Mike" v-model="checkedNames">Mike
                <p>{{ checkedNames }}</p>
            </div>
        </div>
        
        <div>
            <h2>v-model="selected"时，返回的是选中的value的值，要传的值是value，显示的是{{}}</h2>
            <select v-model="selected">
                <option disabled>请选择</option>
                <option value="A">A</option>
                <option value="B">B</option>
                <option value="C">C</option>
            </select>
            <p>{{selected}}</p>
        </div>
        <hr>
        <hr>
        <h1>表单的值绑定</h1>
        <div>
            <div>
                <h2>复选框、单选框皆可以用,toggle需要为字符串类型，返回结果为true时为yes,false为no</h2>
                <input type="checkbox" v-model="toggle" true-value="yes" false-value="no">
                <p>{{toggle}}</p>
            </div>
            <div>
                <h2>单选框：选中时返回的值为选中项的动态value的值</h2>
                <input type="radio" v-model="pick" :value="username">
                <p v-if="pick.length">{{username}}</p>
            </div>
            <div>
                <h2>选择框：选中时返回的是选中项的动态value的值</h2>
                <select v-model="selectedPick">
                    <option :value="selectedOption">123</option>
                </select>
                <p v-if="selectedPick.length">{{selectedPick}}</p>
            </div>
        </div>
    </div>
</template>
<script>
    export default {
       name:"form11",
        data(){
           return{
               inputValue:"",
               textareaInputValue:"",
               checked:false,
               selected:"",
               valueChecked:"",
               checkedNames:[],//复选框的情形：注意这里是数组的话，那值为value的值组成的数组，如果为字符串/false/true，那值就是true和false
               toggle:"",//复选框的情形：此时为字符串，就是true和false
               //值绑定
               pick:"",
               username:"zhangsan",
               selectedPick:"",
               selectedOption:"567"
           }
        }
    }
</script>
<style scoped>

</style>